<template>
  <div class="selected">
    <ul>
      <li
        v-for="(item, index) in selectedList"
        :key="item.index"
      >
        <img :src="baseUrl + item.item.src" alt="">
        <i @click="$emit('remove', index, item.index)">&times;</i>
      </li>
      <li class="ad" v-if="selectedList.length < 3"></li>
    </ul>
    <span :class="{ disable: selectedList.length <= 1 }" @click="$emit('change', false)"><em class="gou"></em>Compare</span>
  </div>
</template>

<script>
export default {
  props: ['selectedList', 'baseUrl']
}
</script>

<style lang="scss" scoped>
.selected {
  position: fixed;
  inset: 0;
  height: 0.8rem;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 2;
  pointer-events: none;
  display: flex;
  justify-content: end;
  align-items: center;
}

.disable {
  background: #34363d;
  color: #575c6d;
  pointer-events: none;

  em {
    background: #575c6d;

    &::after {
      background: #34363d;
    }
  }
}

.gou {
  background: #eee;
  width: 0.25rem;
  height: 0.18rem;
  transform: rotate(-45deg) translateX(0.09rem);
  position: relative;

  &::after {
    content: '';
    position: absolute;
    background: #4652cd;
    width: 100%;
    height: 100%;
    bottom: 0.06rem;
    left: 0.06rem;
  }
}

span {
  color: #eee;
  font-size: 0.24rem;
  height: 0.6rem;
  display: flex;
  justify-content: space-evenly;
  width: 2rem;
  background: #4652cd;
  font-weight: 600;
  align-items: center;
  margin-right: 0.1rem;
  cursor: pointer;
  pointer-events: auto;
}

ul {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

  li {
    margin-right: 0.1rem;
    width: 0.6rem;
    height: 0.6rem;
    background: rgba($color: #fff, $alpha: 0.4);
    display: flex;
    position: relative;

    img {
      width: 0.5rem;
      height: 0.5rem;
      object-fit: contain;
      margin: auto;
    }

    i {
      pointer-events: auto;
      position: absolute;
      top: -0.03rem;
      right: 0.04rem;
      font-weight: 600;
      color: #eee;
      font-size: 0.2rem;
      cursor: pointer;
    }
  }

  .ad {
    background: rgba($color: #fff, $alpha: 0.1);
  }
}
</style>
